xquery version "1.0";

import module namespace layout="http://www.example.com/layout" at "xmldb:exist:///db/projdb/modules/layout.xqm";

declare option exist:serialize "doctype-public=-//W3C//DTD&#160;XHTML&#160;1.1//EN
                                doctype-system=http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";
                                
declare function local:sort 
  ( $seq as item()* )  as item()* {
       
   for $item in $seq
   order by $item
   return $item
 };


declare variable $allNamesExtendedWithSortedTopics { 
    let $s := document('/db/projdb/clusterdataSortedBySpeakers.xml')/speakers/speaker
    return 
        for $a in $s
            let $labels := string-join( 
                for $b in $a/clusters/cluster/label/name
                    return string( data($b) )
                , ", " )
                
            let $labelsNoDup := string-join( local:sort( distinct-values( tokenize($labels, ", ") ) ), ", " )
                
            return concat( data($a/name), '|', data( $labelsNoDup ) )
};

declare variable $allNamesExtendedWithSortedFullTopics { 
    let $s := document('/db/projdb/clusterdataSortedBySpeakers.xml')/speakers/speaker
    return 
        for $a in $s
            let $labels := string-join( 
                for $b in $a/clusters/cluster/fullLabel
                    return string( data($b) )
                , "; " )

            return concat( data($a/name), '|', data( $labels ) )
};

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Onderwerpen in de plenaire vergaderingen</title>
        <link rel="stylesheet" style="text/css" href="style/core_layout.css"/>
		<link type="text/css" href="style/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery.js"><!-- --></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"><!-- --></script>
        <script type="text/javascript" src="js/myScripts.js"><!-- --></script>
        <script type="text/javascript" src="js/subjects.js"><!-- --></script>

        <script type="text/javascript">
            var allNames = new Array({ concat('"',data(subsequence($allNamesExtendedWithSortedTopics, 1, 1 )),'"'), for $n in subsequence( $allNamesExtendedWithSortedTopics, 2 ) return concat(",",'"',data($n),'"') });
            var allNamesFull = new Array({ concat('"',data(subsequence($allNamesExtendedWithSortedFullTopics, 1, 1 )),'"'), for $n in subsequence( $allNamesExtendedWithSortedFullTopics, 2 ) return concat(",",'"',data($n),'"') });
            //<![CDATA[
                $(document).ready(function() {
                    initShowHideButtons();
                    fillSelect( "selectBoxCommonInterestsPeopleToAdd", allNames );
                    fillSelectFull( "selectBoxCommonInterestsPeopleToAddFull", allNamesFull );
                    updateCommonInterests()
                    updateCommonInterestsFull()
                });
            //]]>

            //<![CDATA[
            function updateCommonInterests2d() {        
                selectedPeople = getAllValuesInSelectByClassName( "optionSelectBoxCommonInterestsAddedPeople" );
                baloe = "Hoera";
                
                //]]>
                selectedPeople = new Array({ concat('"',data(subsequence($allNamesExtendedWithSortedTopics, 1, 1 )),'"') });
                //<![CDATA[   	
                fillList( "listCommonInterests", selectedPeople );
                console.log("testje" + selectedPeople.length );
            }
            //]]>            
            
        </script>

        
    </head>
    <body>	
        <div class="containerBox">  
        {layout:topMenu()}
  
        <div class="box" id="titleBox">
            <div class="margin">
                <h1>Onderwerpen</h1>
            </div>
        </div>

        <div class="box" id="commonInterestsBox">
            <div class="margin">
              <h2 class="boxTitle">Gemeenschappelijke onderwerpen single labels</h2>
              <div class="boxContent"> 
                <div class="columnContent twoColumns">
                    <div class="column" id="peopleToSelectContainer">
                        <div class="field leftField">Te selecteren personen:</div>
                        <div class="field leftField">
                            <select name="selectBoxCommonInterestsPeopleToAdd" id="selectBoxCommonInterestsPeopleToAdd" multiple="multiple" class="selectBox">
                            <!-- -->
                            </select>
                        </div>
                        <div class="field leftField">
                            <button type="buttonAddName" onClick="addName()" class="buttonSelectBox" >Voeg persoon toe</button>
                        </div>
                    </div>
                    <div class="column" id="selectedPeopleotherContainer">
                        <div class="field rightField">Geselecteerde personen: </div>
                        <div class="field rightField">
                            <select name="selectBoxCommonInterestsAddedPeople" id="selectBoxCommonInterestsAddedPeople" multiple="multiple" class="selectBox" onchange="updateCommonInterests()">
                            <!-- -->
                            </select>
                        </div>
                        <div class="field rightField">
                            <button type="buttonRemoveName" onClick="removeName()" class="buttonSelectBox" >Verwijder persoon</button>
                        </div>
                    </div>
                    <br class="clearer" />
                </div>
                <div class="columnspace oneColumn darkBackground">
                    <div class="column">
                        <h3 class="columnTitle">Onderwerpen</h3>
                        <ol id="listCommonInterests"><!-- //--></ol>
                    </div>
                    <br class="clearer"/>
                </div>
              </div>
            </div>
        </div>
        
        
<div class="box" id="commonInterestsBoxFull">
            <div class="margin">
              <h2 class="boxTitle">Gemeenschappelijke onderwerpen full labels</h2>
              <div class="boxContent"> 
                <div class="columnContent twoColumns">
                    <div class="column" id="peopleToSelectContainerFull">
                        <div class="field leftField">Te selecteren personen:</div>
                        <div class="field leftField">
                            <select name="selectBoxCommonInterestsPeopleToAddFull" id="selectBoxCommonInterestsPeopleToAddFull" multiple="multiple" class="selectBox">
                            <!-- -->
                            </select>
                        </div>
                        <div class="field leftField">
                            <button type="buttonAddName" onClick="addNameFull()" class="buttonSelectBox" >Voeg persoon toe</button>
                        </div>
                    </div>
                    <div class="column" id="selectedPeopleotherContainerFull">
                        <div class="field rightField">Geselecteerde personen: </div>
                        <div class="field rightField">
                            <select name="selectBoxCommonInterestsAddedPeopleFull" id="selectBoxCommonInterestsAddedPeopleFull" multiple="multiple" class="selectBox" onchange="updateCommonInterestsFull()">
                            <!-- -->
                            </select>
                        </div>
                        <div class="field rightField">
                            <button type="buttonRemoveNameFull" onClick="removeNameFull()" class="buttonSelectBox" >Verwijder persoon</button>
                        </div>
                    </div>
                    <br class="clearer" />
                </div>
                <div class="columnspace oneColumn darkBackground">
                    <div class="column">
                        <h3 class="columnTitle">Onderwerpen</h3>
                        <ol id="listCommonInterestsFull"><!-- //--></ol>
                    </div>
                    <br class="clearer"/>
                </div>
              </div>
            </div>
        </div>

</div>
    </body>
</html>
